import React, {Component} from 'react';
import PriceList from '../Components/PriceList';
import ViewTab from '../Components/ViewTab';
import MonthPicker from '../Components/MonthPicker';
import CreateBtn from '../Components/CreateBtn'
import TotalPrice from '../Components/TotalPrice'
import logo from "../logo.svg";
import {LIST_VIEW, CHART_VIEW,TYPE_OUTCOME, parseToYearAndMonth,padLeft} from "../utility";

const categories = {
    "1": {
        "name": "奖金",
        "id": "1",
        "type": "income",
        "icon": "#icon-weibiaoti--"
    },
    "2": {
        "name": "奖金",
        "id": "1",
        "type": "income",
        "icon": "#icon-weibiaoti--"
    }
}
// PriceList参数
const items = [
    {
        "id": "1",
        "title": "去云南旅游",
        "date": "2018-09-10",
        "price": 400,
        "cid": "1",
    },
    {
        "id": "2",
        "title": "sg奖金",
        "date": "2018-09-10",
        "price": 400,
        "cid": "2",
    }
]

const newItem = {
    "id":4,
    "title":"新添加的项目",
    "price":300,
    "date":"2020-4-22",
    "cid":"2"
}

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            items: items,
            currentDate: parseToYearAndMonth(),
            tabView: LIST_VIEW
        }
    }
    changeView = (view) => {
        this.setState({
            tabView: view
        })
    }
    createItem=()=>{
        this.setState({
            items:[newItem,...this.state.items]
        })
    }
    modifyItem = (modifiedItem) => {
        const modifiedItems = this.state.items.map(item => {
                if(item.id === modifiedItem.id) {
                    return {...item,title:"更新后的标题"}
                }else{
                    return item
                }
            }
        )
        this.setState({
            items:modifiedItems
        })
    }
    deleteItem = (deletedItem) => {
        const filteredItems = this.state.items.filter(item => item.id !== deletedItem.id)
        this.setState({
            items: filteredItems
        })
    }
    changeDate = (year,month) => {
        this.setState({
            currentDate: {year,month}
        })
    }

    render() {
        const { items,currentDate,tabView } = this.state
        const itemsWithCategory = items.map(item => {
            item.category = categories[item.cid]
            return item
        }).filter(item => {
            return item.date.includes(`${currentDate.year}-${padLeft(currentDate.month)}`)
        })
        let totalIncome = 0, totalOutcome = 0
        items.forEach(item => {
            if (item.category.type === TYPE_OUTCOME) {
                totalOutcome += item.price
            } else {
                totalIncome += item.price
            }
        })
        return (
            <React.Fragment>
                <header className="app-header">
                    <div className="row mb-5 justify-content-center">
                        <img src={logo} className="App-logo" alt="logo"/>
                    </div>
                    <div className="row">
                        <div className="col">
                            <MonthPicker
                                year={currentDate.year}
                                month={currentDate.month}
                                onChange={this.changeDate}
                            />
                        </div>
                        <div className="col">
                            <TotalPrice
                                income={totalIncome}
                                outcome={totalOutcome}
                            />
                        </div>
                    </div>
                </header>
                <div className="content-area py-3 px-3">
                    <ViewTab
                        activeTab={tabView}
                        onTabChange={this.changeView}
                    />
                    <CreateBtn
                        onClick={this.createItem}
                    />
                    {tabView===LIST_VIEW&&
                    <PriceList
                        items={itemsWithCategory}
                        onModifyItem={this.modifyItem}
                        onDeleteItem={this.deleteItem}
                    />
                    }
                    {tabView===CHART_VIEW&&
                        <h1>hi</h1>
                    }
                </div>
            </React.Fragment>
        );
    }
}

export default Home;